<template>
    <div class="changePhone" >
         <div class="text">更换手机号</div>
         <div class="getCode">
             <label for="">验证码 :</label>
            <input class="password" type="text"  placeholder="请输入验证码" v-model="form.code">
            <span @click="getCode" :disabled="disableds">{{hint}}</span>
        </div>
        <div class="warn" v-show="hints">验证码已发送到{{form.tel}},请注意查收</div>
         <el-row><el-button type="primary" round @click="next">下一步</el-button></el-row>
    </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        tel: "",
        code: "",  //输入的验证码
        code2:""  //返回的验证码
      },
      hint: "获取验证码",
      disableds: false,
      hints:false
    };
  },
  methods: {
    getCode() {
      // 获取验证码
      let flag = false;
      if (flag) return false;
      let i = 60; 

      let countDown;
      this.utils.$get(this.utils.GET_USER_MESSAGE,
        res => {
        let tel = res.data.userTel;
        
        this.utils.$post(
          this.utils.GET_USERSMS, 
          data => {
             this.form.code2 = data.data;//保存后台返回的验证码
            // console.log(data.data)
          //发送验证码 
                //隐藏中间几位电话号码
          this.form.tel = '';
          let telStr = String(tel)
          for (let i = 0; i <= telStr.length-1; i++) {
            let telTelp
            if (i > 2 && i < 8) {
              telTelp = '*'
            }else{
              telTelp = telStr[i]
            }
            this.form.tel += telTelp
          }
          console.log(this.form.tel)
          this.hints = true
    
          if (data.code != 0) return alert(data.msg);
          countDown = setInterval(() => {
            this.disableds = true;
            i--;
            this.hint = i + "s";
            if (i <= 0) {
              this.disableds = false;
              this.hint = "获取验证码";
              clearInterval(countDown);
            }
          }, 1000);
        },{type:3,tel:tel});
          
      });
    },
   //下一步
    next(){
       if(this.form.code.length == 0 || this.form.code==''){
         this.$message.error("验证码不能为空");
         return;
       }else if(this.form.code != this.form.code2){
        this.$message.error("您输入的验证码有误");
         return;
       }else{
         this.$router.push({path:'/changePhoneNext/'+this.form.code2});
       }
    }
  }
};
</script>


<style lang="less">
.changePhone {
  text-align: left;
  .text {
    margin-left: 35px;
    margin-top: 40px;
    display: inline-block;
    font-weight: 700;
    font-size: 18px;
    color: #399bff;
    padding-bottom: 10px;
    border-bottom: 3px solid #399bff;
  }
  .getCode {
    margin-top: 40px;
    margin-left: 35px;
    > label {
      font-size: 14px;
      color: #999999;
    }
    .password {
      font-size: 14px;
      color: #cccccc;
      text-indent: 8px;
      border: 1px solid #cccccc;
      margin-left: 12px;
      height: 40px;
      width: 280px;
    }
    > span {
      font-size: 14px;
      color: #399bff;
      margin-left: 12px;
    }
  }
  .warn {
    font-size: 14px;
    color: #999999;
    margin-top: 12px;
    margin-left: 122px;
  }
  .el-button--primary {
    width: 240px;
    height: 40px;
    border-radius: 40px;
    float: left;
    margin-top: 100px;
    margin-left: 119px;
    > span {
      font-size: 14px;
      color: #ffffff;
    }
  }
}
</style>

